<template>
  <div class="app-container">

    <!--查询条件开始-->
    <el-card class="box-card" style="margin-bottom: 10px;" >
    <el-form ref="queryForm" :model="queryParams" :inline="true" label-width="68px">
      <el-form-item label="登录名称" prop="title">
        <el-input
          v-model="queryParams.userName"
          placeholder="请输入登录名称"
          clearable
          size="small"
          style="width:150px"
        />
      </el-form-item>
      <el-form-item label="登录账号" prop="operName">
        <el-input
          v-model="queryParams.loginAccount"
          placeholder="请输入登录账号"
          clearable
          size="small"
          style="width:150px"
        />
      </el-form-item>
      <el-form-item label="IP地址" prop="operName">
        <el-input
          v-model="queryParams.ipAddr"
          placeholder="请输入IP地址"
          clearable
          size="small"
          style="width:150px"
        />
      </el-form-item>
      <el-form-item label="登录状态" prop="businessType">
        <el-select
          v-model="queryParams.loginStatus"
          placeholder="请选择登录状态"
          clearable
          size="small"
          style="width:150px"
        >
          <el-option
            v-for="dict in statusOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="登录类型" prop="status">
        <el-select
          v-model="queryParams.loginType"
          placeholder="请选择登录类型"
          clearable
          size="small"
          style="width:150px"
        >
          <el-option
            v-for="dict in businessTypeOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="创建时间">
        <el-date-picker
          v-model="dateRange"
          size="small"
          style="width:260px"
          type="datetimerange"
          align="right"
          range-separator="-"
          start-placeholde="开始日期"
          end-placeholde="结束日期"
          value-format="yyyy-MM-dd HH:mm:ss"
          :picker-options="pickerOptions">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button type="normal" icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    </el-card>
    <!--查询条件结束-->

    <!--表头按钮开始-->
    <el-card class="box-card" style="margin-bottom: 10px;" >
      <el-row :gutter="10" style="margin-bottom: 8px;">
        <el-col :span="1.5">
          <el-button type="danger" icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete">删除</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button type="warning" icon="el-icon-thumb" size="mini" @click="handleClearInfo">清空</el-button>
        </el-col>
      </el-row>
      <!--表头按钮结束-->

      <!--数据表格开始-->
      <el-table v-loading="loading" border :data="loginLogTableList" @selection-change="handleSelectionChange" :header-cell-style="{
                  'color': '#3D4144',
                }">
        <el-table-column type="selection" align="center" width="55" />
        <el-table-column label="日志ID"    align="center" prop="id" />
        <el-table-column label="登录名称"   align="center" prop="userName" />
        <el-table-column label="登录账号"   align="center" prop="loginAccount"/>
        <el-table-column label="IP地址"    align="center" prop="ipAddr" />
        <el-table-column label="登录地点"   align="center" prop="loginLocation" />
        <el-table-column label="浏览器类型" align="center" prop="browser" />
        <el-table-column label="操作系统"  align="center" prop="os" />
        <el-table-column label="操作状态"  align="center" prop="loginStatus" >
          <template slot-scope="scope">
            <el-tag :type="scope.row.loginStatus === '0' ? '' : 'warning'" disable-transitions>{{scope.row.loginStatus==='0' ? '成功':'失败'}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作类型"  align="center" prop="loginType" width="200" :formatter="businessTypeFormatter"/>
        <el-table-column label="信息"     align="center" prop="msg" width="200" />
        <el-table-column label="登录时间"  align="center" prop="loginTime" width="200" />
        <el-table-column label="操作"     align="center" width="100">
          <template slot-scope="scope">
            <el-button v-if="scope.row.id !== 0" type="text" icon="el-icon-delete" size="mini" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--数据表格结束-->

      <!--分页控件开始-->
      <el-pagination
        v-show="total>0"
        :current-page="queryParams.pageNum"
        :page-sizes="[5,10,20,30]"
        :page-size="queryParams.pageSize"
        layout="total,sizes,prev,pager,next,jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>
    <!--分页控件结束-->

  </div>
</template>

<script>
import {listForPageLoginLog,deleteLoginLogByIds,clearAllLoginLog} from '@/api/system/Log/loginLog'
export default {
  //数据绑定
  data(){
    return{
      // 快捷时间
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      // 遮罩层
      loading: false,
      // 选中多条
      multiple: true,
      // 选中数组
      ids: [],
      // 总条数
      total: 0,
      // 日志数据
      loginLogTableList: [

      ],
      // 登录状态
      statusOptions: [{"dictValue":"0","dictLabel":"成功"},{"dictValue":"1","dictLabel":"失败"}],
      // 登陆类型
      businessTypeOptions: [
        {"dictValue":"0","dictLabel":"后台登录"},
        {"dictValue":"1","dictLabel":"扫脸登录"},
        {"dictValue":"2","dictLabel":"小程序登录"}
      ],
      // 时间
      dateRange: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        userName: undefined,
        loginAccount: undefined,
        ipAddr: undefined,
        loginStatus: undefined,
        loginType: undefined
      }
    }
  },
  //初始化
  created() {
    //查询出所有表格数据
    this.getLoginLogList()
  },
  //自定义方法
  methods: {
    //查询操作信息
    getLoginLogList(){
      this.loading = true
      const query = {
        'pageNum': this.queryParams.pageNum,
        'pageSize': this.queryParams.pageSize,
        'userName': this.queryParams.userName,
        'loginAccount': this.queryParams.loginAccount,
        'ipAddr': this.queryParams.ipAddr,
        'loginStatus': this.queryParams.loginStatus,
        'loginType': this.queryParams.loginType,
        'beginTime':this.dateRange[0],
        'endTime':this.dateRange[1]
      }
      listForPageLoginLog(query)
        .then(res=>{
          this.loginLogTableList = res.data.records
          this.total = res.data.total
          this.loading = false
        })
    },

    // 查询按钮点击事件
    handleQuery() {
      this.getLoginLogList()
    },

    // 重置按钮点击事件
    resetQuery(){
      this.dateRange=[]
      this.getLoginLogList()
    },

    // 表头按钮删除事件
    handleDelete(row){
      let id = row.id === undefined ? this.ids :row.id
      this.$confirm('是否删除此日志消息?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteLoginLogByIds(id).then(res =>{
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.getLoginLogList()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },

    // 表头按钮清空按钮事件
    handleClearInfo(){
      this.$confirm('是否清空日志数据?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        clearAllLoginLog().then(res =>{
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.getLoginLogList()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });

    },

    //页面大小发生改变
    handleSizeChange(val){
      this.queryParams.pageSize = val
      this.getLoginLogList()
    },

    //当前页数发生改变
    handleCurrentChange(val){
      this.queryParams.pageNum = val
      this.getLoginLogList()
    },

    //多选框是否有选中
    handleSelectionChange(selection){
      this.ids = selection.map(item => item.id)
      this.multiple =!(selection !== 0)
    },

    // 翻译
    selectDictLabel(datas,value){
      const actions = []
      Object.keys(datas).map((key) => {
        if (datas[key].dictValue === value) {
          actions.push(datas[key].dictLabel)
          return false
        }
      })
      return actions.join('')
    },


    //操作类型
    businessTypeFormatter(row){
      return this.selectDictLabel(this.businessTypeOptions,row.loginType)
    },

    //操作状态
    statusFormatter(row){
      return this.selectDictLabel(this.statusOptions,row.loginStatus)
    }

  },
  watch:{
    'queryParams.userName':{
      handler(newVal,oldVal){
        this.queryParams.pageNum = 1
        this.getLoginLogList()
      },
      deep:true
    },
    'queryParams.loginAccount':{
      handler(newVal,oldVal){
        this.queryParams.pageNum = 1
        this.getLoginLogList()
      },
      deep:true
    },
    'queryParams.ipAddr':{
      handler(newVal,oldVal){
        this.queryParams.pageNum = 1
        this.getLoginLogList()
      },
      deep:true
    },
    'queryParams.loginStatus':{
      handler(newVal,oldVal){
        this.queryParams.pageNum = 1
        this.getLoginLogList()
      },
      deep:true
    },
    'queryParams.loginType':{
      handler(newVal,oldVal){
        this.queryParams.pageNum = 1
        this.getLoginLogList()
      },
      deep:true
    },
    'dateRange':{
      handler(val, oldVal){
        this.queryParams.pageNum = 1
        this.getLoginLogList()
      },
      deep:true //true 深度监听
    }
  }
}
</script>

<style scoped>

</style>
